<template>
    <div id="bottomLeft">
        <div class="bg-color-black">
            <div class="d-flex pt-2 pl-2">
              <template>
                <el-table
                  :data="jihe"
                  :header-cell-style="{
            backgroundColor: 'transparent',
            fontSize: '40px',
            color: '#2dd5fc',
            textAlign: 'center',
          }" :cell-style="{
            color: '#2dd5fc',
            backgroundColor: 'transparent',
            textAlign: 'center',
          }" :row-style="{
            color: '#fff',
            backgroundColor: 'transparent',
            textAlign: 'center',
          }"
                  border
                  style="margin-left:5px"
                >
                  <el-table-column  prop="deptName" label="部门" class="ziti"></el-table-column>
                  <el-table-column prop="deptpersonNum.length" label="在场人数"></el-table-column>
                </el-table>
              </template>
<!--              <dv-scroll-board :config="config" class="gundong"/>-->
            </div>

        </div>
    </div>
</template>

<script>
    // import BottomLeftChart from "@/components/echart/bottom/bottomLeftChart";

    export default {
        data() {
            return {
                jihe: [],
                shu: [],

              config: {
                header: ["组件", "分支",],
                data: [],
                align: ['center', 'center'],

              }
            };
        },
        components: {
            // BottomLeftChart
        },
        created() {

          this.initWebSocket()
        },
        methods: {
          change() {
            //change、paly表格数据动态滚动
            this.jihe.push(this.jihe[0]) //把第一条数据插入数组最有一条
            this.jihe.shift() //删除数组中第一条数据
          },
          paly() {
            setInterval(this.change, 5000) //每两秒执行一次插入删除操作
          },

          loginPeople() {
            const api = "http://192.168.10.175:8088/device/getRedisDeptThosePresentTotal";
            this.$axios({
              url: api,
              method: "get",
              //用于表示用户代理是否在跨域请求的情况下从其他域中发送cookies
              withCredentials: true,//默认为false

            }).then(res => {
              // console.log("------------------")
              // console.log(res)
              this.jihe=res.data.deptperson
             if(this.jihe.length>9){
               this.paly()
             }
            });
          },
          //websocket 长链接   用于生成收款码 实时判断等
          //初始化weosocket
          initWebSocket() {
            if (typeof WebSocket === 'undefined') {  //判断浏览器是否支持
              alert('您的浏览器不支持WebSocket')
              return false
            }
            var userName = this.list    //获取当前登录用户信息
            // const wsuri = 'ws://cloud.lgdz-aiti.cn/prod-api/websocket/' + userName  //线上
            const wsuri = 'ws://192.168.10.175:8088/ws/asset/' + 4  //线下

            this.websock = new WebSocket(wsuri)               //初始化socket方法
            this.websock.onopen = this.websocketonopen     //连接成功的处理
            this.websock.onmessage = this.websocketonmessage //接收数据之后的处理
            this.websock.onerror = this.websocketonerror     //报错的处理
            this.websock.onclose = this.websocketclose       //关闭连接的处理
          },
          //连接成功
          websocketonopen() {
            console.log('WebSocket本机连接成功5656')
            this.loginPeople();
            // 添加心跳检测，每300秒发一次数据，防止连接断开（这跟服务器的设置有关，如果服务器没有设置每隔多长时间不发消息断开，可以不进行心跳设置）
            let self = this
            // this.timer = setInterval(() => {
            //   try {
            //     const jsonHeart = {
            //       'Status': 'heart',            //向服务端标明 本机心跳
            //       'user': this.list                    //同时携带登录用户信息
            //     }
            //     self.websock.send(JSON.stringify(jsonHeart))  //发送消息
            //   } catch (err) {
            //     console.log('断开了：' + err)
            //     self.connection()
            //   }
            // }, 300000)  // 定时发送
          },
          //接收后端返回的数据，可以根据需要进行处理 实时监控数量
          websocketonmessage(e) {
            const userName = this.list     //获取当前登录用户信息
            var res = JSON.parse(e.data) //将JSON字符串转换成一个对象
            // var res = e.data
            console.log("-----------------数据44444")
            console.log(res)
            this.jihe=res.deptperson
          },
          //连接建立失败重连
          websocketonerror(e) {
            console.log(`连接失败的信息：`, e)
            this.initWebSocket() // 连接失败后尝试重新连接
          },
          //关闭连接
          websocketclose(e) {
            // console.log('断开连接', e)
          },
        }
    };
</script>

<style lang="scss">
    #bottomLeft {
       padding-top: 2px;
        .d-flleft {
            width: 300px;
            height: 80px;
            text-align: center;
            /*background-color: #4b67af;*/
        }
.gundong{
  width: 880px;
  height: 860px;
  text-align: center;
  margin-left: 6px;
}
        .d-flright {
            width: 300px;
            height: 80px;
            text-align: center;
            position: absolute;
            left: 350px;
            top: 5px;
          /*background-color: #4b67af;*/
        }

        .bg-color-black {
            height: 6.0625rem;
            border-radius: 0.125rem;
        }





        .shuzi {
            background-color: #2dd5fc;
            border-radius: 5px;
            color: black;
            height: 80px;
            width: 100%;
            text-align: center;
            line-height:80px;
            margin-left: 120px;
            font-weight: 500;
            margin-top: 20px;
            font-size: 50px;
        }

      /deep/ .el-table,
      .el-table__expanded-cell {
        background-color: transparent;
      }

      /deep/ .el-table tr {
        background-color: transparent !important;
      }

      /deep/ .el-table--enable-row-transition .el-table__body td,
      .el-table .cell {
        background-color: transparent;
      }

      /deep/ .el-table__row > td {
        border: none;
      }

      /deep/ .el-table thead {
        border: 0;
      }

      /deep/ .el-table {
        border: 0;

        th,
        tr,
        td {
          border: 0;
          background-color: #fff;
        }

        &::before {
          height: 0px;
        }

        &::after {
          width: 0;
        }

        .el-table__fixed:before {
          height: 0;
        }
      }
      .el-table .cell {
         line-height: 70px !important;
        font-size: 50px;
      }


        /*.chart-box {*/
        /*    margin-top: 0.2rem;*/
        /*    width: 2.125rem;*/
        /*    height: 2.125rem;*/

        /*    .active-ring-name {*/
        /*        padding-top: 0.125rem;*/
        /*    }*/
        /*}*/
    }
</style>
